const path = require("path")
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: { // 打包入口
      index: path.resolve(__dirname, '../src/app.js')
    },
    output: { // 打包出口
        filename: 'assets/js/[name].[hash:8].js',
        path: path.resolve(__dirname, '../dist'),
        // publicPath: '//10.68.46.173:9000/', // html模板里的img图片前缀
        // publicPath: './'
    },
    module: {
        rules: [{
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.(sa|sc|c|le)ss$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                }, {
                    loader: "css-loader"
                }, {
                    loader: "less-loader"
                }, ],
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[hash:8].[ext]', // name：文件名，contenthash：哈希，:8：哈希的长度，[ext]：文件后缀
                    outputPath: 'assets/font/', // 打文件打包路径
                },
            },
            {
                test: /\.(png|jpg|gif)$/,
                loader: 'file-loader',
                options: {
                    esModule: false, // 这里设置为false,解决页面require不能引用图片的问题
                    name: '[name].[hash:8].[ext]', // name：文件名，contenthash：哈希，:8：哈希的长度，[ext]：文件后缀
                    outputPath: 'assets/img/', // 打文件打包路径
                },
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
          filename: 'index.html', // 默认储存到dist文件夹目录下
          template: './src/index.html', // 添加html模板
          cache: false, // 清除缓存
          hash: true // 添加哈希值
        }),
        new MiniCssExtractPlugin({
            filename: 'assets/css/[name].[hash:8].css', // css独立文件指定出口
        }),
        new VueLoaderPlugin(),
    ]
}